<template>

  <div class="Main">
      <h1 class="h1">快速注册</h1>
      <div>
        <div class="userName">
          <div class="userName1">
           <span>用户名:</span><el-input v-model="userName" placeholder="请输入用户名" class="input" @blur="H1()"></el-input> 
           <span v-if="type" class="wenzi">用户名重复，请重新输入</span>
          </div>
        </div>



        <div  class="password">
          <div class="password1">
<span>密码:</span><el-input v-model="password" placeholder="请输入密码" class="input1" @blur="H2()"></el-input>  <span class="wenzi"  v-if="type1">密码为6位纯数字</span>
          </div>
          
        </div>


        <div class="RealName">
          <div class="RealName1">
 <span>真实姓名:</span><el-input v-model="RealName" placeholder="请输入真实姓名" class="input2" @blur="H3()"></el-input>  <span class="wenzi"  v-if="type2">真实姓名必须为2-5个的中文字符</span>
          </div>
          
        </div>

        <div  class="gender">
          <div class="gender1">
        <span>性别:</span>   <el-radio v-model="radio" label="0">男</el-radio>
          <el-radio v-model="radio" label="1">女</el-radio>
        </div>
         </div>

         <div class="phone">
           <div class="phone1">
<span>电话号码:</span><el-input v-model="phone" placeholder="请输入电话号码" class="input4"  @blur="H4()"></el-input>  <span class="wenzi"  v-if="type3">请输入正确的手机号</span>
           </div>
         </div>
      </div>
     <div class="button">
         <el-button class="button1" @click="register()">注册</el-button>
         <el-button class="button2" @click="registerManager()">注册管理员</el-button>
       <el-button  @click="back">返回</el-button>
     </div>
      
  </div>
</template>


<script>
export default {
     data(){
       return{
         userName:'',
         password:'',
         RealName:'',
         phone:'',
         type:false,
         type1:false,
         type2:false,
         type3:false,
         radio: '1',
       }
     },
     methods:{
       H1(){
          let fd = new FormData
          fd.append("userName",this.userName)
          this.$axios.post("/api/User/userNameRepeat",fd).then(
            res=>{
              console.log(res.data)
              if(res.data.userName!=null){
                this.type = true
              }else{
                this.type=false
              }
            }
          )
          
       },
       H2(){
         let password1 = /^\d{6}$/;
       let pwd =  password1.test(this.password)
        if(pwd){
          this.type1 = false
        }else{
          this.type1 = true
        }
       },
       H3(){
         let Realname = /^[\一-\龥]{2,5}$/;
         let Rn = Realname.test(this.RealName)
         if(Rn){
           this.type2 = false
         }else{
           this.type2 = true
         }
       },
       H4(){
         let tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
         let telphone = tel.test(this.phone)
         if(telphone){
           this.type3 =false
         }else{
           this.type3 = true
         }
       },
       register(){
         let fd = new FormData()
         fd.append("userName",this.userName)
         fd.append("userPassword",this.password)
         fd.append("userRealName",this.RealName)
         fd.append("userGender",this.radio)
         fd.append("userPhone",this.phone)
            if(this.type==true||this.type1==true||this.type2==true||this.type3==true){
               alert("请规范注册命名")
         }else{
          this.$axios.post("/api/User/addUser",fd).then(
           res=>{
               console.log(res.data)
                alert("注册成功")
               this.$router.push("/")
           }
         )
         }
       },
       back(){
         this.$router.push("/")
       },
       registerManager(){
 let fd = new FormData()
         fd.append("managerName",this.userName)
         fd.append("managerPassword",this.password)
         fd.append("managerRealName",this.RealName)
         fd.append("managerGender",this.radio)
         fd.append("managerPhone",this.phone)
          if(this.type==true||this.type1==true||this.type2==true||this.type3==true){
               alert("请规范注册命名")
         }else{
          this.$axios.post("/api/Manager/addManager",fd).then(
           res=>{
               console.log(res.data)
                alert("注册管理员成功")
               this.$router.push("/")
           }
         )
         }
       }
     }
}
</script>

<style>
.h1{
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}
.Main{
   width: 100%;
   height: 970px;
   margin: auto;
   background-color: rgb(153, 153, 138);
   overflow: hidden;
}
.input{
  width: 200px;
  margin-left: 15px;

}

.input1{
  width: 200px;
  margin-left: 30px;
  
}
.input2{
  width: 200px;
  
  
}
.input3{
  width: 200px;
  margin-left: 30px;
  
}
.input4{
  width: 200px;
  /* margin-left: 15px; */
  
}

.password{
  width: 600px;
  height: 80px;
  margin: auto;
}


.password1{
 margin-left: 150px;
}



.userName{
   width: 600px;
    height: 80px;
    margin: auto;
}

.userName1{
   margin-left: 150px;
}

.RealName{
   width: 600px;
    height: 80px;
  margin: auto;
  
}

.RealName1{
  width: 550px;
  margin-left: 150px;
}

.gender{
   width: 600px;
    height: 80px;
    margin: auto;
  
}

.gender1{
    margin-left: 180px;
}

.phone{
   width: 600px;
    height: 80px;
    margin: auto;
}

.phone1{
 margin-left: 150px;
}

.button{
  width: 600px;
    height: 80px;
  margin: auto;
}

.button1{
    margin-left: 170px;
}

.wenzi{
  color:red;
}

</style>
